<template>
  <div class="headernav">
    <div class="topAppBar">
      <div class="topAppBar-left">
        <div class="circleBtn" @click="setMenuVisible">
          <i class="material-icons iconfont iconapps" />
        </div>
        <div class="title" @click="setMenuVisible">{{ title }}</div>
        <div class="leftOther">
          <slot></slot>
        </div>
      </div>
      <div class="topAppBar-right">
        <div class="circleBtn">
          <i class="material-icons iconfont iconhelp_outline" />
        </div>
        <div class="circleBtn">
          <i class="material-icons iconfont iconsettings" />
        </div>
        <!-- userInfoCard -->
        <div class="avatar">
          <el-popover
            placement="bottom"
            :visible-arrow="false"
            trigger="click"
            popper-class="header-user-popover"
            :width="288"
          >
            <AvatarCard :userInfo="userInfo" />
            <div class="user_head" slot="reference">
              <head-img
                :src="
                  userInfo && userInfo.avatar
                    ? `${userInfo.avatar}?${avatarHash}`
                    : ``
                "
                :firstName="userInfo.firstName"
                :lastName="userInfo.lastName"
              />
            </div>
          </el-popover>
        </div>
      </div>
    </div>
    <el-menu
      default-active="2"
      :class="{ 'el-menu-vertical': true, show_menu: show_menu }"
    >
      <sidebar-item
        :menuItems="menus"
      ></sidebar-item>
    </el-menu>
  </div>
</template>

<script>
import SidebarItem from '@/components/private-components/SidebarItem'
export default {
  name: "TopAppBar",
  components:{
    SidebarItem
  },
  data() {
    return {
      userInfo: {
        avatar: require("@/assets/logo.png"),
        firstName: "Dierdre",
        lastName: "Hu",
        email: "Dierdre.hu@edoovo.com",
      },
      avatarHash: "",
      show_menu: false,
      menus: [
        {
          id: "adminConsole",
          name: "Admin Console",
          rouerterName: "adminConsole"
        },
        {
          id: "staff",
          name: "Staff",
          rouerterName: "staff"
        },
        {
          id: "students",
          name: "Students",
          rouerterName: "students"
        },
        {
          id: "parents",
          name: "Parents",
          rouerterName: "parents"
        },
        {
          id: "classes",
          name: "Classes",
          rouerterName: "classes"
        },
      ],
    };
  },
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  watch: {
    userInfo() {
      this.avatarHash = +new Date();
    },
  },
  methods: {
    setMenuVisible() {
      this.show_menu = !this.show_menu;
    },
    // _getSvg(menu) {
    //   if (menuIconParams[menu] && menuIconParams[menu].svg) {
    //     return menuIconParams[menu].svg;
    //   }
    //   return "product_app";
    // },
    _topItemClick(item) {
      // if (this.menusTo[item.id]) {
      //   this.show_menu = false;
      //   this.$router.push({
      //     path: this.menusTo[item.id]
      //   });
      // } else {
      this.$message("The app is still under development and not usable yet.");
      // }
    },
  }
};
</script>

<style lang="less">
.header-user-popover {
  padding: 0;
  margin-top: 38px !important;
  transform: translateX(-14px);
}
</style>
<style lang="less" scoped>
.topAppBar {
  height: 64px;
  line-height: 64px;
  background: #1a73e8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #ffffff;
  &-left {
    display: flex;
    align-items: center;
    cursor: pointer;
    .title {
      min-width: 256px;
      font-size: 22px;
      font-family: OpenSans-Bold;
    }
    .circleBtn {
      margin: 0 4px;
    }
  }
  &-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .avatar {
      margin-right: 12px;
      margin-left: 40px;
      width: 32px;
      height: 32px;
      line-height: 32px;
      border-radius: 50%;
      font-family: OpenSans-Bold;
      font-size: 12px;
      text-align: center;
      color: #efefef;
      background-color: #b4b4b4;
      cursor: pointer;
      span {
        display: block;
      }
      .user_head {
        cursor: pointer;
        width: 32px;
        height: 32px;
        line-height: 32px;
        overflow: hidden;
        border-radius: 50%;
        background-color: #ddd;
        // border: 1px dashed #445469;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .circleBtn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    &:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }
    i {
      font-size: 24px;
      line-height: 24px;
    }
  }
}
.headernav {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}
.el-menu-vertical {
  padding-top: 24px;
  position: absolute;
  transition: left 0.5s;
  left: -352px;
  top: 64px;
  width: 280px !important;
  height: 1020px;
  background: #fff;
  z-index: 999;
  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.16);
  &.show_menu {
    left: 0;
  }
}
</style>
